<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <el-card>
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column prop="authName" label="权限名称"> </el-table-column>
          <el-table-column prop="path" label="路径"> </el-table-column>
          <el-table-column label="权限等级">
              <template slot-scope="scope">
                <el-tag :type="typeobj[scope.row.level]">{{scope.row.level | rank }}</el-tag>
              </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>
  </div>
</template>

<script>
import { getquanxianApi } from "@/http/api";
export default {
  data() {
    return {
      tableData: [],
      typeobj:{
          "0":"primary",
          '1':'success',
          '2':'warning'
      }
    };
  },
  mounted(){  
    this.getlist(); 
  },
  methods: {
    async getlist() {
      //调用权限的接口
      let res = await getquanxianApi('list');
      console.log(res);
      this.tableData = res;
    },
  },
};
</script>

<style scoped></style>

